.dh-message {
    --dh-message-bg-color: var(--dh-color-info-light-9);
    --dh-message-border-color: var(--dh-border-color-lighter);
    --dh-message-padding: 15px 19px;
    --dh-message-close-size: 16px;
    --dh-message-close-icon-color: var(--dh-text-color-placeholder);
    --dh-message-close-hover-color: var(--dh-text-color-secondary);
  }
  .dh-message {
    width: fit-content;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    border-radius: var(--dh-border-radius-base);
    border-width: var(--dh-border-width);
    border-style: var(--dh-border-style);
    border-color: var(--dh-message-border-color);
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: var(--dh-message-bg-color);
    padding: var(--dh-message-padding);
    display: flex;
    align-items: center;
    transition: top var(--dh-transition-duration), opacity var(--dh-transition-duration), transform var(--dh-transition-duration);
    .dh-message__content {
      color: var(--dh-message-text-color);
      overflow-wrap: anywhere;
    }
    &.is-close .dh-message__content {
      padding-right: 30px;
    }
    .dh-message__close {
      display: flex;
      align-items: center;
    }
    .dh-message__close svg {
      cursor: pointer;
    }
    .dh-message__icon {
      position: relative;
      top: 2px;
      right: 10px;
    }
  }
 .dh-message--success {
  --dh-message-bg-color: var(--dh-color-success-light-9);
  --dh-message-border-color: var(--dh-color-success-light-8);
  --dh-message-text-color: var(--dh-color-success);
  .dh-message__close {
    --dh-icon-color: var(--dh-color-success);
  }
 }
 .dh-message--info {
  --dh-message-bg-color: var(--dh-color-info-light-9);
  --dh-message-border-color: var(--dh-color-info-light-8);
  --dh-message-text-color: var(--dh-color-info);
  .dh-message__close {
    --dh-icon-color: var(--dh-color-info);
  }
 }
 .dh-message--warning {
  --dh-message-bg-color: var(--dh-color-warning-light-9);
  --dh-message-border-color: var(--dh-color-warning-light-8);
  --dh-message-text-color: var(--dh-color-warning);
  .dh-message__close {
    --dh-icon-color: var(--dh-color-warning);
  }
 }
 .dh-message--danger {
  --dh-message-bg-color: var(--dh-color-danger-light-9);
  --dh-message-border-color: var(--dh-color-danger-light-8);
  --dh-message-text-color: var(--dh-color-danger);
  .dh-message__close {
    --dh-icon-color: var(--dh-color-danger);
  }
 }
  .dh-message.fade-up-enter-from,
  .dh-message.fade-up-leave-to {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  